﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chat.aspx.cs" Inherits="ChatBox.Web.UI.Chat" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="CSS/Chat.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true">
    </asp:ToolkitScriptManager>
    <div class="box-list">
        <div class="title">
            <div class="login">
                <div class="avatar">
                    <asp:Image ID="Image1" Height="50px" Width="50px" runat="server" ImageUrl="~/Images/avatar.png" />
                </div>
                <div class="clearfix">
                </div>
                <asp:Label ID="lblChao" CssClass="chao" runat="server"></asp:Label>
                <asp:LinkButton ID="lbnThoat" runat="server" OnClick="lbnThoat_Click">Thoát</asp:LinkButton>
            </div>
        </div>
        <div class="list">
            <asp:Repeater runat="server" ID="rptTaiKhoan">
                <ItemTemplate>
                    <div class="user">
                        <a href="javascript:void(0);" class="infor" onclick="Boxpopup(<%# Eval("IDTaiKhoan")%>,'<%# Eval("TaiKhoan")%>');">
                            <asp:Image ID="Image2" CssClass="chaticon" runat="server" ImageUrl="~/Images/chaticon.png" />
                            <asp:Label runat="server" Text='<%# Eval("TaiKhoan")%>'></asp:Label>
                        </a>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </div>
    </form>
    <div id="box-contain">
    </div>
    <script type="text/javascript" language="javascript">

        // Hàm gửi tin nhắn (gọi hàm Send từ server chạy)
        function send(doitac) {
            var nn = doitac;
            var sector = "#idtaikhoan" + doitac + " .noidung";
            var nd = $(sector).val();

            PageMethods.Send(nd, nn,
                function () {
                    $(".noidung").val("");
                },
                function (error) {
                    alert(error);
                });

            return false;
        }

        // Hàm nhận (gọi hàm Receive từ server chạy)
        function receive(doitac) {
            var nn = doitac;

            PageMethods.Receive(nn,
                function (result) {
                    var selector = ".content" + doitac;
                    $(selector).append(result);
                    $(".content").attr({ scrollTop: $(".content").attr("scrollHeight") });
                },
                function (error) {
                    alert(error);
                });
        }

        // Hàm bắt đầu việc load dữ liệu từ database và lập lại liên tục trong 500ms
        function start(doitac) {
            setInterval("receive(" + doitac + ");", 500);
        }

        // Hàm hiện của sổ chat
        function Boxpopup(doitac, tendoitac) {
            var isTonTai = document.getElementById("idtaikhoan" + doitac);
            var selector = "#msg" + doitac;
            if (isTonTai) {
                $(selector).focus();
                return;
            }
            var strhtml = "<div class='box' id='idtaikhoan" + doitac + "'><div class='header'><span style='color:white;margin-left:5px'>" + tendoitac + "<input onclick='minimize(" + doitac + ");' class='minimize bgminimize' type='botton' value=''/><input onclick='closePopup(" + doitac + ");' class='close bgclose' type='botton' /></span></div><div class='toggle" + doitac + "'><div class='content" + doitac + " content'></div><div class='message'><textarea rows='2' id='msg" + doitac + "' cols='20' class='message-box noidung'></textarea> <input type='submit' value='Gửi' class='message-botton' onclick='send(" + doitac + ");' /></div></div><div class='tendoitac" + doitac + " tendoitac'><span style='color:white'>" + tendoitac + "</span></div></div>";
            $('#box-contain').append(strhtml);
            
            start(doitac);

        }

        // Đóng của sổ chat
        function closePopup(doitac) {
            var selector = "#idtaikhoan" + doitac;
            $(selector).remove();
            return false;
        }

        // Thu nhỏ cửa sổ chat
        function minimize(doitac) {
            var selector = ".toggle" + doitac;
            var selectorbox = "#idtaikhoan" + doitac;
            var textarea = "#msg" + doitac;

            $(selector).toggle();

            if ($(textarea).val() != 203) {
                $(textarea).val(203);
                $(selectorbox).css({ 'top': 203 });

            }
            else {
                $(textarea).val('');
                $(selectorbox).css({ 'top': 0 });
            }

            return false;
        }

        //Hiển thị tin nhắn được người khác gửi
//        $(document).ready(function () {

//            PageMethods.TinNhan(function (result) {
//                if (result != " ") {
//                    var aTaiKhoan = result.split(",");
//                    for (i = 0; i < aTaiKhoan.length-1; i++) {
//                        var aNguoiGui = aTaiKhoan[i].split(" ");
//                        var IDNguoiGui = aNguoiGui[0];
//                        var TenNguoiGui = aNguoiGui[1];
//                        Boxpopup(IDNguoiGui, TenNguoiGui);
//                    }
//                }
//                else {
//                    return;
//                }
//            }, function (error) {
//                alert(error);
//            });
//        });
        
    </script>
</body>
</html>
